✅ Deploy Preview for asyncapi-website ready!

Name	Link
🔨 Latest commit	f5e08e6
🔍 Latest deploy log	https://app.netlify.com/sites/asyncapi-website/deploys/63a184130a66250009ad07e5
😎 Deploy Preview	https://deploy-preview-1139--asyncapi-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

what if we just merge this one instead? 😄

cc @magicmatatjahu @derberg

⚡️ Lighthouse report for the changes in this PR:

Lighthouse ran on https://deploy-preview-1139--asyncapi-website.netlify.app/

@alequetzalli In general I accept the changes, but let it be accepted by Łukasz, because I see that he sees the problems and knows better what this fragment should have :)

• how is this fragment going to be used?

All CLI installation guide H3 fragments will be placed at the end of the doc's Installation Guide H2 section.

EX: If we were adding this fragment to the current Streetlights tutorial, it would look like this...

import CliInstallation from '../../../assets/docs/fragments/cli-installation.md' 

<CliInstallation/>

• we are missing instructions on how to install on any operating system using NPM (Using NPM and Node)

added! ✅

ready for review again @derberg @magicmatatjahu ✨

@derberg Sure, we can change it, but fyi h5 also uses text-md. https://github.com/asyncapi/website/blob/master/components/MDX.js#L41 So we also have to remember about that.

so ...what are we doing about the header's perceived font size then? leaving as is or...?
@derberg @magicmatatjahu

@alequetzalli I think it is more important to visibly distinguish between h3 and h4 than h4 and h5. Because I think h5 is not that often used anyway

so please in this PR also make a change in https://github.com/asyncapi/website/blob/master/components/MDX.js#L41

• from

  h4: props => <h4 {...props} className={`${props.className || ''} my-4 font-heading antialiased font-medium text-lg text-gray-900`} />,
  

• to

  h4: props => <h4 {...props} className={`${props.className || ''} my-4 font-heading antialiased font-medium text-md text-gray-900`} />,
  

@alequetzalli I think it is more important to visibly distinguish between h3 and h4 than h4 and h5. Because I think h5 is not that often used anyway

@derberg omg YAY, thanks for showing me where to make that style change, I had no idea 😂

Yeah I agree, I'm glad you caught this and noticed the sizing differences, I did not.

okidoki, I have completed the latest feedback from @derberg ✨✨✨✨

READY FOR REVIEW AGAIN jumps up and down

/rtm